<template>
  <div class="outside">
    <!--<viewhand :deleteids="this.needid"></viewhand>-->
    <el-row :gutter="20" class="seachnav">
      <el-col :xs="7" :sm="6" :md="4" :lg="6" :xl="3">
        <span><img :src="returnnormalpress" class="returnnormalpress"/></span>
        <span><img :src="titles" class="equiplist"/><div style="margin-top: 2px;float: right;"><span style="font-size: 18px; margin-left: 10px;">报表</span></div></span>
      </el-col>
    </el-row>
    <div class="topContent">
      <span class="topSpen" style="font-weight: bold">报表</span>
      <el-dropdown @command="handleCommand" trigger="click">
        <span class="el-dropdown-link topSpen">
          {{this.news}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="全部">全部</el-dropdown-item>
          <el-dropdown-item command="日报">日报</el-dropdown-item>
          <el-dropdown-item command="周报">周报</el-dropdown-item>
          <el-dropdown-item command="月报">月报</el-dropdown-item>
          <el-dropdown-item command="年报">年报</el-dropdown-item>
          <el-dropdown-item command="综合报表">综合报表</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span style="color: #666666; font-size: 14px">生成时间:</span>
      <el-date-picker
        v-model="startTime"
        @change="startTimeCange"
        type="datetime"
        class="topInput"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="开始日期">
      </el-date-picker>
      <span style="font-size: 14px;">到</span>
      <el-date-picker
        v-model="endTime"
        @change="endTimeCange"
        type="datetime"
        class="topInput"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="结束日期">
      </el-date-picker>
    </div>
    <div class="organizationOutMore">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item class="handItem topRight">
          <div class="pagination-container footerPage">
            <el-pagination
              @current-change="CurrentChange"
              @size-change="SizeChange"
              :page-sizes="[5, 10, 20, 50]"
              background layout="total, sizes, prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="organizationTable">
      <a href="index.vue"></a>
      <el-table :key='tableKey' :data="reportsData" stripe fit highlight-current-row height="814" ref="thetree"
                style="width: 100%;" :header-cell-style="{background:'#F7F8F9',height: '20px',padding:'10px 0px'}">
        <el-table-column
          prop="index"
          label="序号"
          align="center"
          width="60">
        </el-table-column>
        <el-table-column
          prop="name"
          label="报表名称"
          width="330">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          sortable
          width="220">
        </el-table-column>
        <el-table-column
          prop="build_time"
          sortable
          label="生成时间">
        </el-table-column>
        <el-table-column
          prop="excel_file_path"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button @click="downloadWork(scope.$index,scope.row)" class="tableIcon" type="text" title="下载" size="small">
              <img :src="download" alt="下载"/>
            </el-button>
            <!--<span class="reportsSpan">l</span>-->
            <!--<el-button @click="dialogReports = true" class="tableIcon" type="text" title="替换模板" size="small">-->
            <!--<img :src="replace" alt="替换模板"/>-->
            <!--</el-button>-->
            <ETLdelete></ETLdelete>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import ETLdelete from '@/views/configurationETL/component/delete'
  import titles from '@/assets/reports/title.png'
  import wraningDelete from '@/assets/components/wraningDelete.png'
  import returnnormalpress from '@/assets/reports/invalid.png'
  import equiplist from '@/assets/reports/title.png'
  import download from '@/assets/reports/download_normal.png'
  import axios from 'axios'
  export default {
    components: {
      ETLdelete
    },
    data() {
      return {
        wraningDelete,
        returnnormalpress,
        equiplist,
        titles,
        download,
        reportsData: [],
        news: '全部',
        activeName: 'second',
        tableKey: 0,
        startTime: '',
        endTime: '',
        downloadURL: '',
        siteListQuery: {
          page: 1,
          limit: 20,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        siteList: [],
        total: 1,
        // localStorage.getItem('access_token')
        // 生成报表总览
        submitReports: {
          access_token: localStorage.getItem('access_token'),
          type: 'report_overview',
          data: {
            begin_time: '',
            end_time: '',
            type: ''
          },
          page: {
            page_size: '10',
            page_num: '1'
          }
        },
        downloadReports: {
          access_token: localStorage.getItem('access_token'),
          type: 'report_download',
          data: {
            id: '1',
            file_type: 'excel'
          }
        }
      }
    },
    created() {
      this.getAllReports()
    },
    methods: {
      getAllReports() {
        this.reportsData = []
        axios.post('/report', this.submitReports, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.reportsData = res.data.data.items
          this.total = parseInt(res.data.data.page.total)
          for (let a = 0; a < this.reportsData.length; a++) {
            this.reportsData[a].index = (a + 1) + (res.data.data.page.page_num - 1) * res.data.data.page.page_size
          }
        })
          .catch((error) => {
            console.log(error)
          })
      },
      CurrentChange(val) {
        this.submitReports.page.page_num = (val) + ''
        this.getAllReports()
      },
      SizeChange(pageSize) {
        this.submitReports.page.page_size = (pageSize) + ''
        this.getAllReports()
      },
      startTimeCange() {
        if (this.startTime) {
          this.submitReports.data.begin_time = this.startTime
          this.getAllReports()
        } else {
          this.submitReports.data.begin_time = ''
          this.getAllReports()
        }
      },
      endTimeCange() {
        if (this.endTime) {
          this.submitReports.data.end_time = this.endTime
          this.getAllReports()
        } else {
          this.submitReports.data.end_time = ''
          this.getAllReports()
        }
      },
      handleCommand(command) {
        this.news = command
        if (this.news === '全部') {
          this.submitReports.data.type = ''
          this.submitReports.page.page_num = '1'
          this.getAllReports()
        } else if (this.news === '日报') {
          this.submitReports.data.type = 'day'
          this.submitReports.page.page_num = '1'
          this.getAllReports()
        } else if (this.news === '周报') {
          this.submitReports.data.type = 'week'
          this.submitReports.page.page_num = '1'
          this.getAllReports()
        } else if (this.news === '月报') {
          this.submitReports.data.type = 'month'
          this.submitReports.page.page_num = '1'
          this.getAllReports()
        } else if (this.news === '年报') {
          this.submitReports.data.type = 'year'
          this.submitReports.page.page_num = '1'
          this.getAllReports()
        } else if (this.news === '综合报表') {
          this.submitReports.data.type = 'other'
          this.submitReports.page.page_num = '1'
          this.getAllReports()
        }
      },
      downloadWork(index, row) {
        console.log(row.excel_file_path)
        let http = process.env.BASE_API
        this.downloadReports.data.id = String(row.id)
        axios.post('/report', this.downloadReports, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.downloadURL = http + res.data.data
          if ('download' in document.createElement('a')) { // 非IE下载
            const elink = document.createElement('a')
            elink.download = row.excel_file_path
            elink.style.display = 'none'
            elink.href = res.data.data
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 释放URL 对象
            document.body.removeChild(elink)
          } else { // IE10+下载
            navigator.msSaveBlob(res.data.data, row.excel_file_path)
          }
        })
          .catch((error) => {
            console.log(error)
          })
      }
    }
  }
</script>

<style scoped>
  /*顶部start*/
  .outside {
    padding: 0px 20px 20px 20px;
    background: #EFEFEF;
  }
  .topContent {
    width: 100%;
    height: 50px;
    padding: 15px 15px 15px 0px;
  }
  .topSpen {
    font-size: 14px;
    margin-right: 20px;
    color: #333333;
  }
  .topInput {
    width: 200px;
    height: 24px;
  }
  /deep/ .topInput > .el-input__inner {
    height: 24px;
  }
  .organizationOutMore{
    width: 100%;
    height: 40px;
    background-color: #ffffff;
    padding-left: 10px;
  }
  /deep/ label {
    font-weight: normal;
    color: #69727E;
  }
  /deep/ .handItem {
    margin-bottom: 5px!important;
  }
  /deep/ .topRight {
    float: right;
    height: 30px;
  }
  /deep/ .el-button + .el-button {
    margin-left: 5px;
  }
  /deep/ .el-button--primary {
    height: 24px;
    font-size: 14px;
    padding: 3px 16px;
    background: #0072F3;
    border-color: #0072F3;
  }
  /deep/ .organizationTable{
    width: 100%;
    min-height: 500px;
    background-color: #fff;
  }
  /deep/ .tableIcon {
    padding: 0px;
    font-size: 20px;
    font-weight: 500;
  }
  .el-popper[x-placement^="bottom"] {
    margin-top: 12px;
    width: 98px;
    color: #e0e0e0;
  }
  /deep/ .el-input__icon {
    line-height: 24px;
  }
  /deep/ .el-button--text {
    color: #31BACB;
  }
  /deep/ .el-table__header-wrapper {
    height: 40px;
  }
  /deep/ .el-table th {
    padding: 3px;
    background: #F7F8F9!important;
  }
  /deep/ .el-table td {
    padding: 5px 0px;
    border: none;
  }
  /deep/ .el-button + .el-button {
    margin-left: 5px;
  }
  /deep/ .footerPage{
    float: right;
    margin-top: 5px;
  }
  /deep/ .gutter {
    background: #D8DEE8;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #409EFF;
    color: #fff;
  }
  /deep/ .el-tag {
    background-color: transparent;
    border: none;
  }
  /deep/ .el-tag--success {
    background-color: transparent;
    color: #E53D41;
  }
  /deep/ .seachnav {
    width: 60%;
    height: 50px;
    position: fixed;
    z-index: 2;
    top: 0;
    bottom: 0;
    line-height: 50px;
  }
  /deep/ .returnnormalpress{
    vertical-align: middle;
  }
  /deep/ .equiplist{
    vertical-align: middle;
    cursor: pointer;
    margin-left: 20px;
  }
</style>
